<template>
  <div class="c">
      <el-button  type="info" style="float:left"
      round @click="backEvent()">返回</el-button>
    <el-button
      style="float: right"
      type="primary"
      round
      @click="clickHandler"
      >提交</el-button
    >
  
    <h2>{{ this.task.content }}</h2>
    <div style="border: 1px solid #ccc; min-height: 300px">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 300px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { queryById } from "../../api/task.js";
import { addWork, queryByStudentIdAndTaskId, edit } from "../../api/work.js";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { mapGetters } from "vuex";
export default {
  components: { Editor, Toolbar },
  setup() {
    // 适用于富文本的图片上传服务 file图片的上传参数  第二个就是返回后数据插入到富文本编辑器的内容
    const update = (file, insertFn) => {
      // console.log(file);
      // console.log(insertFn)
    };
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();
    // 内容 HTML
    const valueHtml = ref("");
    const toolbarConfig = {};
    const editorConfig = {
      placeholder: "请输入内容...",
      MENU_CONF: {
        uploadImage: {
          customUpload: update,
        },
      },
    };
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });

    const handleCreated = (editor) => {
      editorRef.value = editor; // 记录 editor 实例，重要！
    };
    return {
      editorRef,
      valueHtml,
      mode: "simple",
      toolbarConfig,
      editorConfig,
      handleCreated,
      update,
    };
  },
  // 数据源
  data() {
    return {
      taskId: "",
      task: {
        title: "",
        sender: "",
        time: "",
        taskId: "",
        courseId: "",
        content: "",
      },
      work: {
        workId: "", //后端生成
        taskId: "",
        studentId: "",
        content: "", //富文本编辑器获得
        score: "", //传空字段
      },
      workId: "",
      flag: true, //是否首次提交
    };
  },
  //生命周期函数---
  mounted() {
    this.taskId = this.getParams();
    this.getFlag();
    this.queryTask();
  },
  //基本方法
  methods: {
    getFlag() {
      queryByStudentIdAndTaskId(this.studentId, this.taskId).then((res) => {
        // console.log(this.studentId);
        // console.log(this.taskId);
        // console.log(res)
        if (res.code == 200) {
          // console.log(res.data)
          if (res.data == null) {
            this.flag = true;
          } else {
            this.flag = false;
            this.valueHtml = res.data.content;
            this.workId = res.data.workId;
            this.work.workId = res.data.workId;
          }
        }
      });
    },
    clickHandler(evt) {
      let target = evt.target;
      if (target.nodeName == "SPAN") {
        target = evt.target.parentNode;
      }
      target.blur();
      this.work.studentId = this.studentId;
      this.work.taskId = this.taskId;
      this.work.content = this.editorRef.getHtml();
      // console.log(this.work);
      if (this.flag) {
        addWork(this.work).then((res) => {
          // console.log(res)
          if (res.code == 200) {
            //console.log(res.data);
            alert("首次提交成功");
            this.flag = false;
            this.$router.go(-1);
          }
        });
      } else {
        //  console.log("二次编辑")
        edit(this.work).then((res) => {
          // console.log(res)
          if (res.code == 200) {
            //   console.log(res.data);
            alert("修改提交成功");
            this.flag = false;
            this.$router.go(-1);
          }
        });
      }
    },
    getParams() {
      return useRoute().query.taskId;
    },
    queryTask() {
      queryById(this.taskId).then((res) => {
        if (res.code == 200) {
          // console.log(res.data);
          this.task = res.data;
        }
      });
    },
    backEvent(){
      this.$router.go(-1);
    }
  },
  //计算类型方法和其他方法的区别：有缓存。以内存换时间，适用于频繁使用的计算
  computed: {
    ...mapGetters({
      studentId: "getId",
    }),
  },
};
</script>

<style   scoped>
.c {
  overflow: hidden;
}
</style>